<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    import Map from 'ol/Map';
    import View from 'ol/View';
    import Feature from 'ol/Feature';
    import GeoJSON from 'ol/format/GeoJSON';
    import {Circle as CircleStyle, Fill, Stroke, Style, Text, Image, Icon, IconImage} from 'ol/style';
    import {Vector as VectorSource, OSM} from 'ol/source';
    import {Vector as VectorLayer, Tile as TileLayer} from 'ol/layer';
    import {Point, MultiPolygon} from 'ol/geom';
    import GeometryType from 'ol/geom/GeometryType';
    import icon from './image/icon.png'
    import arrow from './image/arrow.png'
    export default {
        name: "VectorGeometryLayer",
        mounted() {

            let geojson = {
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "properties": {},
                        "geometry": {
                            "type": "LineString",
                            "coordinates": [
                                [
                                    113.35384368896484,
                                    23.234721227640602
                                ],
                                [
                                    113.35041046142578,
                                    23.240084246841175
                                ],
                                [
                                    113.35418701171874,
                                    23.24639340521435
                                ],
                                [
                                    113.3572769165039,
                                    23.25837998393433
                                ],
                                [
                                    113.36002349853516,
                                    23.26531908958533
                                ],
                                [
                                    113.36242675781249,
                                    23.27541168916241
                                ],
                                [
                                    113.36277008056639,
                                    23.29307189825664
                                ],
                                [
                                    113.3682632446289,
                                    23.307576745727502
                                ],
                                [
                                    113.38062286376953,
                                    23.33216830631147
                                ],
                                [
                                    113.41461181640625,
                                    23.38070750603324
                                ],
                                [
                                    113.41976165771484,
                                    23.40591566256524
                                ],
                                [
                                    113.44104766845703,
                                    23.447813597872535
                                ]
                            ]
                        }
                    }
                ]
            }
            const vectorSource = new VectorSource();
            let vectorLayer = new VectorLayer({
                source: vectorSource,
                style:this.styleFunction//注意这里返回的是一个样式数组
            })
            this.map = new Map({
                layers: [new TileLayer({
                    source: new OSM()
                }), vectorLayer],
                target: 'map',
                view: new View({
                    center: [116.38916015624999, 39.926588421909436],
                    projection: "EPSG:4326", //指定投影
                    zoom: 4,
                }),
            });
            const features = new GeoJSON().readFeatures(geojson);
            vectorSource.addFeatures(features);
            //遍历要素设置样式
            // for (const feature of features) {
            //     //获取到要素的几何数据与坐标信息
            //     let geometry = feature.getGeometry();
            //     let coordinates = geometry.getCoordinates();
            //     for (const coordinate of coordinates) {
            //         if (coordinate) {
            //             let pointFeature = new Feature({
            //                 geometry: new Point(coordinate), //几何信息
            //             });
            //             pointFeature.setStyle(new Style({
            //                 image: new Icon({
            //                     src: icon
            //                 }),
            //                 text: new Text({
            //                     //文本内容
            //                     text: feature.get('name'),
            //                     //文本填充样式（即文字颜色）
            //                     fill: new Fill({color: '#ff3300'}),
            //                 }),
            //             }))
            //             vectorSource.addFeature(pointFeature);
            //         }
            //     }
            // }
            //this.addFeatureStyle(vectorSource);
            //当前视口适配到数据源的范围
            this.map.getView().fit(vectorSource.getExtent());
        },
        methods: {
            styleFunction(feature) {
                let styles = [];
                styles.push(
                    new Style({ //第一部分返回的线条样式
                        stroke: new Stroke({
                            color: '#35ff33',
                            width: 32
                        })
                    })
                );
                //获取到每个要素的几何数据
                let geometry = feature.getGeometry();
                //遍历每个几何数据的每一分段
                geometry.forEachSegment((start, end) => {
                    let dx = end[0] - start[0];
                    let dy = end[1] - start[1];
                    console.log(dx,dy)
                    //计算出图标旋转斜率
                    //通过斜率计算出该斜率的度数
                    let rotation = Math.atan2(dy, dx)
                    //添加一个点位置的图标样式，方向箭头
                    styles.push(new Style({
                        geometry: new Point(end),//指定样式geometry是点，然后给点设置图片的样式
                        image: new Icon({
                            src: arrow,
                            rotateWithView: false,
                            rotation: -rotation
                        })
                    }))
                })

                return styles;
            }
        }


    }
</script>

<style scoped>

</style>